<template>
  <div class="dynamic-background">
    <el-container style="padding: 30px;">
      <el-header>
        <el-row>
          <el-col :span="8">
            <img src="" style="height: 50px;">
          </el-col>
          <el-col :span="8" style="text-align: center;">
            <span style="color:#fff;font-weight: bold;font-size: 30px;">达达教育在线教育平台</span>
          </el-col>
          <el-col :span="8">
            <img src="" style="height: 50px;">
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="8"></el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px;" v-if="isLogin">
              <h3 style="text-align: center;">用户登录</h3>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <div style="font-size: 14px;color:#666;text-align: center;padding: 10px 0;">
                还没有账号？
                <el-link type="primary" style="font-size: 14px;" @click="toggleForm">立即注册</el-link>
              </div>
            </el-card>
            <el-card style="margin-top: 80px;" v-else>
              <h3 style="text-align: center;">用户注册</h3>
              <el-form label-position="top">
                <el-form-item label="手机号">
                  <el-input placeholder="请输入手机号" v-model="user.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input placeholder="请再次输入密码" show-password v-model="user.confirmPassword"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%;" @click="regist">注册</el-button>
                </el-form-item>
              </el-form>
              <div style="font-size: 14px;color:#666;text-align: center;padding: 10px 0;">
                已有账号？
                <el-link type="primary" style="font-size: 14px;" @click="toggleForm">立即登录</el-link>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

// 定义用户对象用来收集登录/注册表单中的数据
const user = ref({username: '', password: '', confirmPassword: '', phone: ''});
const isLogin = ref(true);

// 定义登录方法
const login = () => {
  console.log(user.value);
  // 向后端服务器发送登录请求, 注意: 这里需要使用axios, 且axios需要导入!
  axios.post(BASE_URL + '/user/login', user.value)
      .then((response) => {
        // 回调函数: 服务器响应后执行的代码
        // response是响应对象, 我们可以通过response.data得到服务器的响应数据
        console.log(response.data); // 后端返回的JsonResult
        if (response.data.code == 2000) {
          ElMessage.success('登录成功!');
          router.push('/menu');
          // 登录成功后将后端返回的userVO存储在localStorage中
          console.log(response.data.data); // 是JsonResult的data值, 此处是userVO
          console.log(JSON.stringify(response.data.data));
          localStorage.setItem('user', JSON.stringify(response.data.data));
        } else {
          ElMessage.error(response.data.msg);
          user.value = {username: '', password: ''};
        }
      })
}

// 定义注册方法
const regist = () => {
  console.log(user.value);
  // 验证确认密码是否一致
  if (user.value.password !== user.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }
  // 向后端服务器发送注册请求, 注意: 这里需要使用axios, 且axios需要导入!
  axios.post(BASE_URL + '/user/save', user.value)
      .then((response) => {
        // 回调函数: 服务器响应后执行的代码
        // response是响应对象, 我们可以通过response.data得到服务器的响应数据
        console.log(response.data); // 后端返回的JsonResult
        if (response.data.code == 2000) {
          ElMessage.success('注册成功!');
          // 注册成功后可以跳转到登录页面或其他页面
          toggleForm();
        } else {
          ElMessage.error(response.data.msg);
          user.value = {username: '', password: '', confirmPassword: '', phone: ''};
        }
      })
      .catch((error) => {
        console.error('注册失败:', error);
        ElMessage.error('注册失败，请重试');
      });
}

// 切换登录/注册表单
const toggleForm = () => {
  isLogin.value = !isLogin.value;
  user.value = {username: '', password: '', confirmPassword: '', phone: ''};
}
</script>

<style scoped>
.dynamic-background {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #4b75e3, #b8e7e5, #f3918a, #42b983, #f5746d, #b8e7e5, #4b75e3);
  background-size: 600% 600%;
  animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
</style>
